<script setup lang="ts">
const show = defineModel<boolean>('show', { required: true })
const input = defineModel<string>('input', { required: true })
const emit = defineEmits(['confirm'])
</script>

<template>
    <van-popup v-model:show="show" round overlay-class="mask">
        <div class="inviter-popup">
            <img class="streamer" src="@/assets/imgs/invited/streamer.png" alt="streamer" width="310">
            <div class="inviter-popup-content">
                <img src="@/assets/imgs/invited/share.png" alt="gift" width="50" class="inviter-popup-content_arrow">
                <div class="inviter-popup-form">
                    <span class="inviter-popup-form-title">Enter the inviter's email</span>
                    <div class="inviter-popup-form-input">
                        <input type="text" v-model="input">
                    </div>
                </div>
                <div class="inviter-popup-btn" @click="emit('confirm')">Confirm</div>
            </div>
        </div>
    </van-popup>
</template>

<style scoped lang="scss">
.inviter-popup {
    position: relative;
    display: flex;
    justify-content: center;
    width: 90vmin;
    height: 90vmin;
    overflow: hidden;

    .streamer {
        position: absolute;
        left: 50%;
        width: 100%;
        z-index: 9;
        transform: translate(-50%, 11vmin);
        pointer-events: none;
    }

    &-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76vmin;
        height: 76vmin;
        border-radius: 5vmin;
        background: url('@/assets/imgs/invited/popup.png') no-repeat center center;
        background-size: 100% 100%;
        transform: translateY(40px);

        &_arrow {
            position: absolute;
            top: -17vmin;
            left: 50%;
            transform: translateX(-50%);
            z-index: 0;
            width: 42vmin;
            pointer-events: none;
        }
    }

    &-form {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 25vmin;
        transform: translateY(-8vmin);

        &-title {
            color: var(--inviter-main-color);
            font-weight: bold;
            font-size: var(--middle-font-size);
        }

        &-input {
            width: 55vmin;
            height: 10vmin;
            background-color: var(--inviter-input-color);
            border-radius: 2vmin;
            padding: 2vmin;

            input {
                width: 100%;
                height: 100%;
                background-color: transparent;
                font-size: var(--normal-font-size);
            }
        }
    }

    &-btn {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8vmin;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60%;
        height: 11vmin;
        background-color: var(--inviter-main-color);
        color: #ffffff;
        font-size: var(--title-font-size);
        border-radius: 2vmin;
        box-shadow: 0px 1vmin 2vmin rgba(0, 0, 0, .1);
    }
}

.van-popup {
    background: transparent;
}

.van-popup--center {
    top: calc(50% - 5vmin);
}
</style>